import logo from './logo.svg';
import './App.css';
// 导入组件
// import ComA from '../src/components/ComA.jsx'
// import ComB from '../src/components/ComB.jsx'
// import ComC from '../src/components/ComC.jsx'
// import ComD from '../src/components/ComD.jsx'
// import LOLm from '../src/components/LOLm.jsx'
// import Big from '../src/components/Big.jsx'
// import CssTransition from '../src/components/CssTransition.jsx'
// import CssTransition2 from '../src/components/CssTransition2.jsx'
import CssTransition3 from '../src/components/CssTransition3.jsx'


// app是所有组件的父组件, 想要看到一个组件, 需要引入到app中
let name = 'Tom';
let age = 18;
let arr1 = ['唱','跳','rap','打篮球'];
let obj = {
  name:'马保国',
  age:70,
  title:'形意八卦掌门人',
  hasWude: false
}
let class1 = 'p1';
let df = 'lolmb'
let ha='hah'
let size1 = '40px'


function App() {
  return (
    <div className="App">
      <header className="App-header">
        {/* <ComA></ComA> */}
        {/* <ComB></ComB> */}
        {/* <ComC></ComC> */}
        {/* <ComD name='剑圣' skil='QWERDF'></ComD> */}
        {/* <LOLm></LOLm> */}
        {/* <Big></Big> */}
        {/* <CssTransition></CssTransition> */}
        {/* <CssTransition2></CssTransition2> */}
        <CssTransition3></CssTransition3>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          jsx的语法: 
          1.允许js和html混写, '{}'表示是js的代码, 尖括号 表示是html的代码;
          2.class在html中要写成className, class是js中的保留字;
          3.style 是两个花括号, 一个表示js是变量 一个表示格式是对象
        </p>
        {/* 修改标签内容 */}
        <p>name:{name}</p>
        <p>age:{age}</p>
        {/* <p>arr1:{arr1}</p> */}
        {/* <p>arr1:{arr1.length}</p> */}
        <p>obj:{obj.name}</p>
        <p>obj:{obj.hasWude ? '':'不'}讲武德</p>

        <p className={class1} style={{fontSize: size1}}>修改标签属性</p>
        <input type={'file'} qwer={df}  ha={ha} ></input>
        {/* 循环渲染 */}
        {
          arr1.map((item, index) => {
            // 渲染虚拟dom 需要给虚拟dom加key属性
            return <button key={index}>{item}</button>
          })
        }
        {/* 条件渲染 */}
        {
          (function(){
            if(obj.hasWude){
              return <p>讲武德的马老师</p>
            }else{
              return <p>不讲武德的马老师</p>
            }
          })()
        }
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
